<script setup>
import * as topicApi from "@/api/topicApi.js";
import { deepClone } from "@/utils/tools.js";
import { ElMessage } from "element-plus";
import { reactive } from "vue";

const _question = {
  title: "", // 题干
  analyze: "", // 解析
  items: [
    { prefix: "A", content: "" },
    { prefix: "B", content: "" },
    { prefix: "C", content: "" },
    { prefix: "D", content: "" },
  ],
  correct: "A", // 标答
  score: 2.0, // 分数
};

let question = reactive({});
resetData();

function resetData() {
  question = reactive(deepClone(_question));
}

async function handleSubmitTopic() {
  const { code, msg } = await topicApi.addTopic(question);
  if (code === 2000) {
    ElMessage.success(msg);
  }
}
</script>

<template>
  <div class="add-topic-container">
    <!-- 题干 -->
    <div class="part">
      <span class="title">题干</span>
      <div class="content">
        <el-input v-model="question.title" placeholder="Please input" />
      </div>
    </div>
    <!-- 选项 -->
    <div class="part">
      <span class="title">选项</span>
      <div class="content">
        <div
          style="margin-bottom: 10px"
          v-for="(item, index) in question.items"
          :key="index"
        >
          <el-input
            style="width: 40px; margin-right: 10px"
            v-model="item.prefix"
            placeholder="Please input"
          />
          <el-input
            style="display: inline"
            v-model="item.content"
            placeholder="Please input"
          />
        </div>
      </div>
    </div>

    <!-- 标答 -->
    <div class="part">
      <span class="title">标答</span>
      <div class="content">
        <el-radio-group v-model="question.correct">
          <el-radio
            :label="item.prefix"
            v-for="(item, index) in question.items"
            :key="index"
            >{{ item.prefix }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>

    <!-- 解析 -->
    <div class="part">
      <span class="title">解析</span>
      <div class="content">
        <el-input v-model="question.analyze" placeholder="Please input" />
      </div>
    </div>

    <!-- 分数 -->
    <div class="part">
      <span class="title">分数</span>
      <div class="content">
        <el-button type="success" @click="question.score--">-</el-button>
        <el-input
          style="width: 30px"
          v-model.number="question.score"
          placeholder="Please input"
        />
        <el-button type="success" @click="question.score++">+</el-button>
      </div>
    </div>

    <!-- 提交 -->
    <el-button type="primary" plain @click="handleSubmitTopic">提交</el-button>
    <!-- <el-button type="info" plain @click="resetData">重置</el-button> -->
  </div>
</template>

<style lang="less">
.part {
  display: flex;
  margin-bottom: 20px;
  // justify-content: left;
  // align-items: center;
  .title {
    font-size: 14px;
    &::after {
      content: "：";
    }
  }
}
</style>